/**
 * 网页进入休眠时，收不到 MQTT 推送，也没法维护联系人列表
 * 从休眠中恢复时，休眠期间聊过天的联系人就不会出现在列表里，而往下拉列表，也不会拉到他们（因为他们应该排在前面）
 * 为应对此情况，从休眠中恢复时，固定刷新网页。
 *
 * 刷新策略：
 * 页面后台运行时，如果检测到 MQTT 断开连接，则标记为“需要刷新页面”，但并不立刻刷新，而是显示一个对话框，
 * 当用户点击对话框时，触发刷新。
 * 这样用户能获知页面发生了什么，而不是不明不白地触发刷新。如果刷新机制有问题，这样也更容易发现。
 */
import { getLogger } from '@gnlab/utils'
import { App } from 'antd'
import services from '@/services'
import { silentReload } from './leave-confirm'

const logger = getLogger('ui/handle-weak-on')

export function useHandleLostConnection() {
  const { modal } = App.useApp()

  useEffect(() => {
    function visibleHandler() {
      const message = document.hidden ? '页面进入后台' : '页面回到前台'
      logger.debug(message)
      void services.netlog.send('weak-on', message)
    }
    document.addEventListener('visibilitychange', visibleHandler, false)

    let needReload = false
    const subscription = services.mqtt.status.subscribe(status => {
      logger.debug('MQTT Status: ' + status)
      void services.netlog.send('mqtt-status', status)

      // 当页面处在后台时，MQTT 连接中断，提示用户需要刷新页面
      if (
        !needReload &&
        document.hidden &&
        (status === 'reconnecting' || status === 'connectFailed')
      ) {
        needReload = true
        modal.confirm({
          title: '网络连接中断',
          content: '需刷新页面，以查看最新内容',
          cancelButtonProps: { style: { display: 'none' } },
          onOk: () => silentReload('因 mqtt 中断，刷新网页'),
        })
      }
    })

    return () => {
      document.removeEventListener('visibilitychange', visibleHandler, false)
      subscription.unsubscribe()
    }
  }, [modal])
}
